<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="华为全球商店客户支持中心，提供订单查询、售后保修、支付帮助等服务">
    <meta name="keywords" content="华为支持,华为售后,华为订单查询,华为客服">
    <title>客户支持 - HUAWEI Global Store</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #f8fafc;
            color: #1f2937;
            overflow-x: hidden;
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Header 优化：新增汉堡菜单样式 */
        .header {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            color: white;
            padding: 15px 0;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
        }

        .logo {
            font-size: 28px;
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .logo:hover {
            transform: scale(1.05);
        }

        .logo::before {
            content: "🌐";
            font-size: 24px;
        }

        /* 汉堡菜单（移动端） */
        #hamburger {
            display: none;
            flex-direction: column;
            gap: 6px;
            cursor: pointer;
            padding: 8px;
            border-radius: 6px;
            background: rgba(255,255,255,0.2);
            transition: background 0.3s ease;
            aria-label: "打开导航菜单";
        }

        #hamburger:hover {
            background: rgba(255,255,255,0.3);
        }

        .hamburger-line {
            width: 24px;
            height: 3px;
            background: white;
            border-radius: 3px;
            transition: all 0.3s ease;
        }

        /* 导航样式优化 */
        .nav {
            display: flex;
            gap: 30px;
            align-items: center;
        }

        .nav a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: all 0.3s ease;
            padding: 8px 12px;
            border-radius: 8px;
            position: relative;
        }

        .nav a::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: white;
            transition: width 0.3s ease;
        }

        .nav a:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-2px);
        }

        .nav a:hover::after {
            width: 100%;
        }

        .user-actions {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .user-actions select {
            padding: 8px 12px;
            border-radius: 8px;
            border: none;
            background: white;
            font-size: 14px;
            cursor: pointer;
            transition: box-shadow 0.3s ease;
        }

        .user-actions select:focus {
            outline: none;
            box-shadow: 0 0 0 3px rgba(255,255,255,0.5);
        }

        /* 购物车图标优化 */
        #cartIcon {
            position: relative;
            padding: 10px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            cursor: pointer;
            transition: all 0.3s ease;
            aria-label: "打开购物车";
        }

        #cartIcon:hover {
            background: rgba(255,255,255,0.3);
            transform: scale(1.1);
        }

        .cart-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background: #ef4444;
            color: white;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* 按钮样式优化：新增禁用状态 */
        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #3b82f6, #1d4ed8);
            color: white;
        }

        .btn-primary:hover {
            background: linear-gradient(135deg, #1d4ed8, #1e40af);
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(59, 130, 246, 0.3);
        }

        .btn-outline {
            background: transparent;
            border: 2px solid white;
            color: white;
        }

        .btn-outline:hover {
            background: rgba(255,255,255,0.2);
        }

        .btn-full {
            width: 100%;
        }

        /* 禁用按钮样式 */
        .disabled-btn {
            background: #e5e7eb !important;
            border-color: #d1d5db !important;
            color: #9ca3af !important;
            cursor: not-allowed !important;
            transform: none !important;
            box-shadow: none !important;
        }

        /* Hero Section 优化 */
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 60px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
            opacity: 0.3;
        }

        .hero-content {
            position: relative;
            z-index: 1;
            max-width: 800px;
            margin: 0 auto;
        }

        .hero h1 {
            font-size: 42px;
            margin-bottom: 16px;
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .hero p {
            font-size: 18px;
            margin-bottom: 0;
            opacity: 0.9;
        }

        /* 常见问题（折叠面板）样式 */
        .faq-section {
            padding: 60px 0;
            background: white;
        }

        .section-title {
            text-align: center;
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 40px;
            color: #1f2937;
            position: relative;
        }

        .section-title::after {
            content: "";
            position: absolute;
            bottom: -12px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, #3b82f6, #1d4ed8);
            border-radius: 2px;
        }

        .faq-container {
            max-width: 800px;
            margin: 0 auto;
            gap: 12px;
            display: flex;
            flex-direction: column;
        }

        .faq-item {
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            overflow: hidden;
            transition: box-shadow 0.3s ease;
        }

        .faq-item:hover {
            box-shadow: 0 4px 20px rgba(0,0,0,0.05);
        }

        .faq-question {
            width: 100%;
            padding: 18px 24px;
            text-align: left;
            background: white;
            border: none;
            font-size: 18px;
            font-weight: 500;
            color: #1f2937;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: background 0.3s ease;
        }

        .faq-question:hover {
            background: #f8fafc;
        }

        .faq-question::-webkit-details-marker {
            color: #3b82f6;
            font-size: 1.4em;
            transition: transform 0.3s ease;
        }

        .faq-item[open] .faq-question::-webkit-details-marker {
            transform: rotate(90deg);
        }

        .faq-answer {
            padding: 0 24px 24px;
            color: #6b7280;
            line-height: 1.7;
            animation: fadeIn 0.3s ease;
        }

        .faq-answer a {
            color: #3b82f6;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .faq-answer a:hover {
            color: #1d4ed8;
            text-decoration: underline;
        }

        /* 联系我们样式优化 */
        .contact-section {
            padding: 60px 0;
            background: #f8fafc;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 24px;
            max-width: 1000px;
            margin: 0 auto;
        }

        .feature-item {
            text-align: center;
            padding: 30px 24px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .feature-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            background: #f8fafc;
        }

        .feature-icon {
            font-size: 42px;
            margin-bottom: 16px;
            color: #3b82f6;
            transition: transform 0.3s ease;
        }

        .feature-item:hover .feature-icon {
            transform: scale(1.1);
        }

        .feature-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #1f2937;
        }

        .feature-description {
            color: #6b7280;
            line-height: 1.6;
            font-size: 14px;
        }

        /* 登录模态框样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 2000;
            backdrop-filter: blur(5px);
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .modal.active {
            display: flex;
            opacity: 1;
        }

        .modal-content {
            background: white;
            padding: 36px;
            border-radius: 20px;
            text-align: center;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            transform: translateY(-20px);
            transition: transform 0.3s ease;
        }

        .modal.active .modal-content {
            transform: translateY(0);
        }

        .modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: transparent;
            border: none;
            font-size: 24px;
            color: #6b7280;
            cursor: pointer;
            transition: color 0.3s ease;
            aria-label: "关闭登录窗口";
        }

        .modal-close:hover {
            color: #ef4444;
        }

        .modal-content h2 {
            font-size: 24px;
            margin-bottom: 24px;
            color: #1f2937;
        }

        .login-form {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .form-group {
            text-align: left;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #1f2937;
        }

        .form-group input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            font-size: 14px;
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
        }

        /* Footer 优化 */
        .footer {
            background: #1f2937;
            color: white;
            padding: 50px 0 24px;
        }

        .footer-content {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 32px;
            margin-bottom: 32px;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        .footer-section h3 {
            margin-bottom: 18px;
            font-size: 18px;
            position: relative;
            padding-bottom: 8px;
        }

        .footer-section h3::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 2px;
            background: #3b82f6;
            border-radius: 1px;
        }

        .footer-section ul {
            list-style: none;
        }

        .footer-section li {
            margin-bottom: 12px;
        }

        .footer-section a {
            color: #9ca3af;
            text-decoration: none;
            transition: color 0.3s ease, padding-left 0.3s ease;
            display: inline-block;
        }

        .footer-section a:hover {
            color: white;
            padding-left: 4px;
        }

        .footer-bottom {
            text-align: center;
            padding-top: 24px;
            border-top: 1px solid #374151;
            color: #9ca3af;
            font-size: 14px;
        }

        /* 响应式优化 */
        @media (max-width: 768px) {
            #hamburger {
                display: flex;
            }
            
            .nav {
                display: none;
                position: absolute;
                top: 75px;
                left: 0;
                right: 0;
                background: #1e40af;
                flex-direction: column;
                gap: 12px;
                padding: 20px;
                box-shadow: 0 10px 20px rgba(0,0,0,0.1);
                z-index: 999;
            }
            
            .nav.active {
                display: flex;
            }
            
            .hero h1 {
                font-size: 32px;
            }
            
            .hero p {
                font-size: 16px;
            }
            
            .section-title {
                font-size: 28px;
            }
            
            .faq-question {
                font-size: 16px;
                padding: 16px 20px;
            }
            
            .footer-content {
                gap: 24px;
            }
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <!-- Header（新增汉堡菜单） -->
    <header class="header">
        <div class="container">
            <div class="header-content">
                <div class="logo" onclick="window.location.href='index.html'">HUAWEI Global Store</div>
                
                <!-- 汉堡菜单（移动端） -->
                <div id="hamburger" aria-expanded="false">
                    <div class="hamburger-line"></div>
                    <div class="hamburger-line"></div>
                    <div class="hamburger-line"></div>
                </div>
                
                <!-- 导航栏 -->
                <nav class="nav">
                    <a href="index.html">首页</a>
                    <a href="product-list.html">新品</a>
                    <a href="support.html" aria-current="page">支持</a>
                    <a href="about.html">关于</a>
                </nav>
                
                <div class="user-actions">
                    <select>
                        <option>🇨🇳 中文</option>
                        <option>🇺🇸 English</option>
                        <option>🇯🇵 日本語</option>
                        <option>🇩🇪 Deutsch</option>
                    </select>
                    
                    <!-- 购物车（新增id绑定事件） -->
                    <div id="cartIcon" aria-label="购物车">
                        🛒
                        <div class="cart-count" id="cartCount">0</div>
                    </div>
                    
                    <!-- 登录/个人中心按钮 -->
                    <button id="loginBtn" class="btn btn-outline" onclick="openLoginModal()">
                        登录
                    </button>
                    <button id="profileBtn" class="btn btn-outline" onclick="handleProfileClick()">
                        个人中心
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 支持页Hero区 -->
    <section class="hero">
        <div class="container hero-content">
            <h1>客户支持</h1>
            <p>我们随时为您提供订单查询、售后保修、技术咨询等全方位服务，让您的使用体验更安心</p>
        </div>
    </section>

    <!-- 常见问题（折叠面板） -->
    <section class="faq-section">
        <div class="container">
            <h2 class="section-title">常见问题</h2>
            <div class="faq-container">
                <!-- 问题1 -->
                <details class="faq-item">
                    <summary class="faq-question" aria-expanded="false" aria-controls="faq-1">
                        📦 如何查询我的订单状态？
                    </summary>
                    <div class="faq-answer" id="faq-1">
                        <p>您可以通过两种方式查询订单：1. 登录账号后，进入<a href="order.html" target="_blank" rel="noopener">我的订单</a>页面，实时查看订单进度（如待支付、已发货、已完成）；2. 未登录时，可通过“订单查询”入口，输入订单号和预留手机号查询。</p>
                        <p>若订单显示“已发货”，页面会同步物流单号及查询链接，点击即可追踪包裹位置。</p>
                    </div>
                </details>

                <!-- 问题2 -->
                <details class="faq-item">
                    <summary class="faq-question" aria-expanded="false" aria-controls="faq-2">
                        🔧 华为产品如何享受售后保修服务？
                    </summary>
                    <div class="faq-answer" id="faq-2">
                        <p>华为产品均享受全球联保服务（部分配件除外），保修期限以产品说明书为准（通常手机/平板为1年，笔记本为2年）。</p>
                        <p>如需保修，可通过以下方式：1. 携带产品及购买凭证（发票/电子订单）前往<a href="#" target="_blank" rel="noopener">官方服务中心</a>（支持全球170+国家/地区）；2. 登录账号后提交“售后申请”，部分地区支持上门取件维修；3. 拨打全球客服热线，获取远程技术支持。</p>
                    </div>
                </details>

                <!-- 问题3 -->
                <details class="faq-item">
                    <summary class="faq-question" aria-expanded="false" aria-controls="faq-3">
                        💳 支持哪些支付方式？支付后多久到账？
                    </summary>
                    <div class="faq-answer" id="faq-3">
                        <p>目前支持多种支付方式：国内用户可使用支付宝、微信支付；国际用户可使用PayPal、Visa、MasterCard、American Express等。</p>
                        <p>支付成功后，系统会实时生成订单（延迟不超过5分钟），若超过10分钟仍未显示“待发货”，可检查支付账户是否扣款，或联系客服核实订单状态。</p>
                    </div>
                </details>

                <!-- 问题4 -->
                <details class="faq-item">
                    <summary class="faq-question" aria-expanded="false" aria-controls="faq-4">
                        🚚 订单发货后多久能收到？能否修改收货地址？
                    </summary>
                    <div class="faq-answer" id="faq-4">
                        <p>发货时效：国内订单通常在支付后1-3个工作日发货，偏远地区延迟1-2天；国际订单根据目的地不同，发货周期为3-7个工作日。</p>
                        <p>收货时间：国内快递一般3-5天，国际快递（DHL/FedEx）通常7-15天（不含清关时间）。</p>
                        <p>地址修改：订单发货前可在“我的订单”中申请修改地址（仅支持同城市修改）；若已发货，需联系客服协调物流方更改，部分物流可能无法修改，需以实际情况为准。</p>
                    </div>
                </details>

                <!-- 问题5 -->
                <details class="faq-item">
                    <summary class="faq-question" aria-expanded="false" aria-controls="faq-5">
                        ❌ 如何申请退换货？
                    </summary>
                    <div class="faq-answer" id="faq-5">
                        <p>符合以下条件可申请退换货：1. 收到产品7天内（以签收时间为准），产品未激活、无划痕、包装完整；2. 质量问题（如无法开机、功能故障）可在15天内申请换货，1年内申请保修。</p>
                        <p>操作步骤：登录账号 → 进入“我的订单” → 选择对应订单 → 点击“申请退换货” → 填写原因及物流信息 → 等待审核（1-2个工作日） → 审核通过后寄回产品 → 收到产品后检测并处理退款/换货。</p>
                    </div>
                </details>
            </div>
        </div>
    </section>

    <!-- 联系我们 -->
    <section class="contact-section">
        <div class="container">
            <h2 class="section-title">联系我们</h2>
            <div class="features-grid">
                <div class="feature-item" onclick="showContactTip('电话支持')">
                    <div class="feature-icon">☎️</div>
                    <h3 class="feature-title">电话支持</h3>
                    <p class="feature-description">全球客服热线：+86 400-123-4567<br>服务时间：24小时（全年无休）</p>
                </div>
                <div class="feature-item" onclick="showContactTip('邮件支持')">
                    <div class="feature-icon">📧</div>
                    <h3 class="feature-title">邮件支持</h3>
                    <p class="feature-description">服务邮箱：service@huawei.com<br>回复时效：24小时内</p>
                </div>
                <div class="feature-item" onclick="showContactTip('在线客服')">
                    <div class="feature-icon">💬</div>
                    <h3 class="feature-title">在线客服</h3>
                    <p class="feature-description">AI智能客服：24小时在线<br>人工客服：9:00-21:00（当地时间）</p>
                </div>
                <div class="feature-item" onclick="showContactTip('服务中心')">
                    <div class="feature-icon">📍</div>
                    <h3 class="feature-title">服务中心</h3>
                    <p class="feature-description">覆盖170+国家和地区<br>支持线下维修、检测、咨询</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h3>产品与服务</h3>
                    <ul>
                        <li><a href="#">手机</a></li>
                        <li><a href="#">平板</a></li>
                        <li><a href="#">笔记本</a></li>
                        <li><a href="#">穿戴设备</a></li>
                        <li><a href="#">智能家居</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>客户服务</h3>
                    <ul>
                        <li><a href="support.html">售后服务</a></li>
                        <li><a href="#">保修政策</a></li>
                        <li><a href="#">用户手册</a></li>
                        <li><a href="#">常见问题</a></li>
                        <li><a href="#">投诉建议</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>关于华为</h3>
                    <ul>
                        <li><a href="#">公司简介</a></li>
                        <li><a href="#">新闻中心</a></li>
                        <li><a href="#">投资者关系</a></li>
                        <li><a href="#">可持续发展</a></li>
                        <li><a href="#">加入我们</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h3>全球站点</h3>
                    <ul>
                        <li><a href="#">🇨🇳 中国大陆</a></li>
                        <li><a href="#">🇺🇸 United States</a></li>
                        <li><a href="#">🇪🇺 Europe</a></li>
                        <li><a href="#">🇯🇵 日本</a></li>
                        <li><a href="#">🇰🇷 韩国</a></li>
                    </ul>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 华为技术有限公司 版权所有 | <a href="#" style="color: #9ca3af;">隐私政策</a> | <a href="#" style="color: #9ca3af;">使用条款</a> | <a href="#" style="color: #9ca3af;">网站地图</a></p>
            </div>
        </div>
    </footer>

    <!-- 登录模态框（新增） -->
    <div class="modal" id="loginModal">
        <div class="modal-content" style="position: relative;">
            <button class="modal-close" id="modalClose" onclick="closeLoginModal()">&times;</button>
            <h2>用户登录</h2>
            <form class="login-form" id="loginForm">
                <div class="form-group">
                    <label for="username">账号/手机号</label>
                    <input type="text" id="username" name="username" required aria-required="true" placeholder="请输入账号或手机号">
                </div>
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" required aria-required="true" placeholder="请输入密码">
                </div>
                <div style="text-align: right; font-size: 14px; margin-top: -8px; margin-bottom: 8px;">
                    <a href="#" style="color: #3b82f6; text-decoration: none;">忘记密码？</a>
                </div>
                <button type="submit" class="btn btn-primary btn-full">登录</button>
                <p style="text-align: center; font-size: 14px; margin-top: 16px; color: #6b7280;">
                    还没有账号？<a href="#" style="color: #3b82f6; font-weight: 500;">立即注册</a>
                </p>
            </form>
        </div>
    </div>

    <script>
        // 1. 缓存DOM元素（减少重复查询）
        const $cartIcon = document.getElementById('cartIcon');
        const $cartCount = document.getElementById('cartCount');
        const $loginBtn = document.getElementById('loginBtn');
        const $profileBtn = document.getElementById('profileBtn');
        const $loginModal = document.getElementById('loginModal');
        const $modalClose = document.getElementById('modalClose');
        const $loginForm = document.getElementById('loginForm');
        const $hamburger = document.getElementById('hamburger');
        const $nav = document.querySelector('.nav');

        // 2. 封装localStorage操作（规范存储逻辑）
        const Storage = {
            // 登录状态
            getIsLoggedIn: () => localStorage.getItem('isLoggedIn') === 'true',
            setIsLoggedIn: (value) => localStorage.setItem('isLoggedIn', value),
            // 购物车数量
            getCartCount: () => parseInt(localStorage.getItem('cartItems')) || 0,
            setCartCount: (count) => localStorage.setItem('cartItems', count),
            // 缓存清理时间
            getLastClear: () => parseInt(localStorage.getItem('lastClear')) || 0,
            setLastClear: (time) => localStorage.setItem('lastClear', time),
            // 清除数据
            clearCart: () => localStorage.removeItem('cartItems'),
            clearLogin: () => localStorage.removeItem('isLoggedIn')
        };

        // 3. 自动清缓存（24小时周期）
        function autoClearCache() {
            const now = Date.now();
            const cacheExpire = 24 * 60 * 60 * 1000; // 24小时
            const lastClear = Storage.getLastClear();

            if (now - lastClear > cacheExpire) {
                console.log('🧹 自动清理缓存：超过24小时');
                Storage.clearCart();
                Storage.clearLogin();
                Storage.setLastClear(now);
                // 更新UI
                $cartCount.textContent = 0;
                updateLoginState();
            }
        }

        // 4. 登录状态更新（UI同步）
        function updateLoginState() {
            const isLoggedIn = Storage.getIsLoggedIn();

            // 登录按钮状态
            if (isLoggedIn) {
                $loginBtn.disabled = true;
                $loginBtn.classList.add('disabled-btn');
                $loginBtn.textContent = '已登录';
                $profileBtn.disabled = false;
                $profileBtn.classList.remove('disabled-btn');
            } else {
                $loginBtn.disabled = false;
                $loginBtn.classList.remove('disabled-btn');
                $loginBtn.textContent = '登录';
                $profileBtn.disabled = true;
                $profileBtn.classList.add('disabled-btn');
                // 未登录清空购物车
                Storage.clearCart();
                $cartCount.textContent = 0;
            }
        }

        // 5. 登录模态框控制
        function openLoginModal() {
            if (Storage.getIsLoggedIn()) {
                alert('您已登录，无需重复操作');
                return;
            }
            $loginModal.classList.add('active');
            document.body.style.overflow = 'hidden'; // 禁止背景滚动
        }

        function closeLoginModal() {
            $loginModal.classList.remove('active');
            document.body.style.overflow = ''; // 恢复背景滚动
            $loginForm.reset(); // 重置表单
        }

        // 6. 登录表单提交（模拟登录）
        function handleLoginSubmit(e) {
            e.preventDefault();
            const username = document.getElementById('username').value.trim();
            const password = document.getElementById('password').value.trim();

            // 简单表单验证
            if (!username || !password) {
                alert('请输入账号和密码');
                return;
            }

            // 模拟登录成功（实际项目需对接后端接口）
            Storage.setIsLoggedIn('true');
            updateLoginState();
            closeLoginModal();
            alert('登录成功！您现在可以使用购物车和个人中心功能');
            
            // 初始化购物车数量（模拟）
            const initCartCount = 0;
            Storage.setCartCount(initCartCount);
            $cartCount.textContent = initCartCount;
        }

        // 7. 购物车点击事件 - 已修改为满足需求
        function handleCartClick() {
            if (Storage.getIsLoggedIn()) {
                // 已登录，跳转到购物车页面
                window.location.href = 'cart.html';
            } else {
                // 未登录，跳转到登录页面
                window.location.href = 'login.html';
            }
        }

        // 8. 个人中心点击事件
        function handleProfileClick() {
            if (!Storage.getIsLoggedIn()) {
                alert('请先登录才能进入个人中心');
                window.location.href = 'login.html';
                return;
            }
            // 已登录，跳转到个人中心页面
            window.location.href = 'user-center.html';
        }

        // 9. 联系我们模块点击提示
        function showContactTip(type) {
            const tips = {
                '电话支持': '全球客服热线：+86 400-123-4567（拨打时可能产生国际长途费用，建议优先使用在线客服）',
                '邮件支持': '发送邮件至service@huawei.com，建议注明订单号/产品型号/问题描述，以便快速处理',
                '在线客服': '点击页面右下角"客服"图标即可发起对话，AI客服可解答常见问题，复杂问题可转人工',
                '服务中心': '前往"服务中心查询"页面，输入所在地区即可获取最近网点地址及营业时间'
            };
            alert(tips[type]);
        }

        // 10. 移动端汉堡菜单控制
        function toggleHamburger() {
            $nav.classList.toggle('active');
            const isActive = $nav.classList.contains('active');
            $hamburger.setAttribute('aria-expanded', isActive);
            // 切换汉堡菜单图标（三条杠 → 叉号）
            const lines = $hamburger.querySelectorAll('.hamburger-line');
            if (isActive) {
                lines[0].style.transform = 'rotate(45deg) translate(5px, 5px)';
                lines[1].style.opacity = '0';
                lines[2].style.transform = 'rotate(-45deg) translate(5px, -5px)';
            } else {
                lines[0].style.transform = 'none';
                lines[1].style.opacity = '1';
                lines[2].style.transform = 'none';
            }
        }

        // 11. 点击模态框外部关闭
        $loginModal.addEventListener('click', (e) => {
            if (e.target === $loginModal) {
                closeLoginModal();
            }
        });

        // 12. 页面加载初始化
        window.addEventListener('load', function() {
            // 初始化登录状态
            updateLoginState();
            // 初始化购物车数量
            $cartCount.textContent = Storage.getCartCount();
            // 绑定事件
            $cartIcon.addEventListener('click', handleCartClick);
            $loginForm.addEventListener('submit', handleLoginSubmit);
            $hamburger.addEventListener('click', toggleHamburger);
            // 自动清缓存检查
            autoClearCache();
            // 每小时检查一次缓存
            setInterval(autoClearCache, 60 * 60 * 1000);
        });
    </script>
</body>

</html>